<template>
  <view>
    <view class="b-head">
      <view class="b-head__search-wrap">
        <input
          type="text"
          placeholder="搜索"
          maxlength="10"
          placeholder-style="font-size:14px;color:#bbb"
        />
        <uniIcons
          type="search"
          size="22"
          color="#bbb"
          class="icon"
        ></uniIcons>
        <view
          class="b-head__title-right"
          @tap="toBuyer"
        >
          <text class="">买家版</text>
        </view>
      </view>
      <view class="b-head__msg">
        <view class="b-head__msg-top">
          <image :src="shopInfo.shopInfo.shopLogo ?'data:image/png;base64,' + shopInfo.shopInfo.shopLogo : '../../static/img/face.jpg'"></image>
          <view class="group">
            <text class="text1">{{shopInfo.shopInfo.shopName}}</text>
            <text class="text2">共有{{shopInfo.shopInfo.shopGoodsNum}}款商品</text>
          </view>
        </view>
        <view class="b-head__msg-bottom">
          <view class="item">
            <text class="text1">{{shopInfo.visitor}}</text>
            <text class="text2">今日访客</text>
          </view>
          <view class="item">
            <text class="text1">{{shopInfo.follow}}</text>
            <text class="text2">今日关注</text>
          </view>
          <view class="item">
            <text class="text1">{{shopInfo.chat}}</text>
            <text class="text2">今日咨询</text>
          </view>
        </view>
      </view>
    </view>

    <view class="b-nav">
      <view
        class="b-nav__item"
        @tap="handleUrl('/pages/StoreManage/index')"
      >
        <image src="../../static/img/dpgl.png"></image>
        <text>店铺管理</text>
      </view>
      <view
        class="b-nav__item"
        @tap="handleUrl('/pages/CabinetManage/index')"
      >
        <image src="../../static/img/ccgl.png"></image>
        <text>橱窗管理</text>
      </view>
      <view
        class="b-nav__item"
        @tap="handleUrl('/pages/GoodsManage/index')"
      >
        <image src="../../static/img/spgl.png"></image>
        <text>商品管理</text>
      </view>
    </view>
    <navigator>
      <view class="b-inform">
        <image
          class="b-inform__left"
          src="../../static/img/trumpet.png"
        ></image>
        <text
          class="b-inform__middle"
          style="color:#333"
        >欢迎使用易讯宝商城</text>
        <view class="b-inform__right">
          <!-- <text>1分钟前</text> -->
          <uniIcons
            type="arrowright"
            size="22"
            color="#bbb"
          ></uniIcons>
        </view>
      </view>
    </navigator>
    <view class="b-swiper">
      <swiper
        class="swiper"
        :indicator-dots="bannerImgs.length>1"
        :autoplay="true"
      >
        <swiper-item
          v-for="(img,index) in bannerImgs.length ? bannerImgs :['../../static/sp.png']"
          :key="index"
        >
          <image :src=" img"></image>
        </swiper-item>

      </swiper>
    </view>
    <!-- <view class="b-task">
      <view class="b-task__title">新手开店任务</view>
      <view class="b-task__item">
        <view class="dot"></view>
        <view class="left">
          <text class="text1">实名认证</text>
          <text class="text2">易迅宝实名身份认证</text>
        </view>
        <view class="right">
          已完成
        </view>
      </view>
      <view class="b-task__item">
        <view class="dot"></view>
        <view class="left">
          <text class="text1">开设橱窗</text>
          <text class="text2">添加一个商品分类橱窗</text>
        </view>
        <view class="right">
          已完成
        </view>
      </view>
      <view class="b-task__item">
        <view class="dot"></view>
        <view class="left">
          <text class="text1">商家商品</text>
          <text class="text2">发布上架一件商品</text>
        </view>
        <view class="right">
          已完成
        </view>

      </view>
    </view> -->
  </view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons"
import { mapState } from "vuex";
export default {
  components: { uniIcons },
  onLoad() {
    this.login()
    this.getBanner()
    this.$socketObj._initWebSocket()
  },
  onShow() {
    this.getSellerMsg()
    this.$store.dispatch(`messageTotal/get_messageTotal`, uni.getStorageSync('messageTotal'));
    this.messageTotal && uni.setTabBarBadge({
      index: 1,
      text: String(this.messageTotal)
    })
  },
  data() {
    return {
      shopInfo: { shopInfo: {} },
      bannerImgs: []
    }
  },
  computed: {
    ...mapState({
      list: state => state.home.sysMsg,
      messageTotal: state => state.messageTotal.messageTotal,
    }),
  },
  methods: {
    async login() {
      let res = await this.$http.POST({
        url: '/user/login/token',
        data: {
          currentSystem: 'ios',
          token: uni.getStorageSync('token')
        }
      })
      if (res.code == 200) {
        console.log('更新token')
        uni.setStorageSync('sessionId', res.sessionId)
        uni.setStorageSync('token', res.token)
      }
    },
    handleUrl(url) {
      uni.navigateTo({
        url
      });
    },
    async getBanner() {
      let res = await this.$http.GET({
        url: '/seller/ad/showAd',
        data: {
          moduleType: 2
        }
      })
      if (res.code == 200) {
        this.bannerImgs = res.data.map(item => {
          return item = 'https://expay-mall.s3-sa-east-1.amazonaws.com' + item.adUrl
        })
      }
    },
    async getSellerMsg() {
      let res = await this.$http.GET({
        url: '/seller/shop'
      })
      if (res.code == 200) {
        uni.setStorageSync('shopInfo', res.data.shopInfo)
        this.shopInfo = res.data
        // console.log(this.shopInfo)
      }
    },
    toBuyer() {
      location.replace(`http://120.40.77.185:59985/buy/h5/?token=${uni.getStorageSync('token')}&sessionId=${uni.getStorageSync('sessionId')}`)
      //?token=${uni.getStorageSync('token')}&sessionId=${uni.getStorageSync('sessionId')}
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/scss';
@include b(head) {
  @include size(100%, 314upx);
  background: #4785f1;
  position: relative;
  @include e(search-wrap) {
    @include flex-bw;
    padding: 0 30upx;
    height: 88upx;
    color: #fff;
    position: relative;
    input {
      border: 1px solid #eee;
      @include size(496upx, 58upx);
      border-radius: 56upx;
      background: #f9f9f9;
      padding-left: 80upx;
      color: #777;
    }
    .icon {
      position: absolute;
      left: 68upx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  @include e(msg) {
    @include size(685upx, 270upx);
    background: #fff;
    @include position--absolute(134upx, null, null, 50%);
    transform: translateX(-50%);
    border-radius: 20upx;
    box-shadow: 0upx 4upx 20upx rgba(0, 0, 0, 0.4);
    &-top {
      display: flex;
      align-items: center;
      height: 144upx;
      padding: 0 30upx;
      image {
        @include size(90upx, 90upx);
        background: yellow;
        border-radius: 10upx;
      }
      .group {
        @include flex-cl-notc;
        padding-left: 20upx;
        .text1 {
          font-weight: 600;
        }
        .text2 {
          font-size: 24upx;
          color: #666;
          padding-top: 6upx;
        }
      }
    }
    &-bottom {
      display: flex;
      padding: 0 20upx;
      margin-top: 14upx;
      justify-content: space-around;
      .item {
        @include flex-cl;
        .text1 {
          font-weight: 600;
        }
        .text2 {
          padding-top: 4upx;
          color: #888;
        }
      }
    }
  }
}
@include b(nav) {
  background: #fff;
  height: 360upx;
  padding: 0 40upx;
  @include flex-sa;
  @include e(item) {
    @include flex-cl;
    padding-top: 120upx;
    image {
      @include size(100upx, 100upx);
    }
    text {
      padding-top: 6upx;
      color: #888;
    }
  }
}
@include b(inform) {
  @include flex-bw;
  margin-top: 20upx;
  background: #fff;
  height: 68upx;
  padding: 0 30upx;
  flex-wrap: nowrap;
  @include e(left) {
    @include size(42upx, 42upx);
  }
  @include e(middle) {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 20upx;
    overflow: hidden;
    text-align: center;
    font-size: 24upx;
  }
  @include e(right) {
    color: #aaa;
  }
}
@include b(swiper) {
  @include size(100%, 180upx);
  margin-top: 20upx;
  .swiper {
    height: 100%;
  }
  image {
    @include size(100%, 100%);
  }
}
@include b(task) {
  background: #fff;
  padding: 0 30upx;
  margin-top: 20upx;

  @include e(title) {
    font-size: 34upx;
    padding: 20upx 0;
  }
  @include e(item) {
    @include flex-bw;
    border-bottom: 1px solid #eee;
    height: 110upx;
    margin-left: 80upx;
    position: relative;
    &:not(:nth-last-child(1)) .dot::after {
      content: '';
      width: 1px;
      border-right: dashed 1px #ccc;
      height: 100upx;
      position: absolute;
      top: 20upx;
      left: 50%;
      transform: translateX(-50%);
    }
    .dot {
      @include size(30upx, 30upx);
      background: #ccc;
      border-radius: 50%;
      position: absolute;
      left: -70upx;
      transform: translateY(-50%);
      top: 50%;
    }
    .left {
      display: flex;
      flex-direction: column;
      .text2 {
        color: #555;
        font-size: 24upx;
        padding-top: 4upx;
      }
    }
    .right {
      background: #4d91f9;
      border-radius: 24upx;
      color: #fff;
      padding: 8upx 28upx;
    }
  }
}
</style>